
<!--
 * @Description: 订单详情页面
 * @Author: yuyanjie
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: Jeremy
 * @LastEditTime: 2022-05-17 19:20:53
-->
<template>
  <div>

    <!-- 头部 -->
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      />

    <div>
    <!--订单详情数据-->
      <van-card v-for="item in DetailData"
      :key="item.id"
      :num="item.number"
      :price="item.price"
      :desc="item.product.description"
      :title="item.product.name"
      :thumb="item.product.photo"
    />
    </div>

    <div v-if=" DetailData.length>0 " class="total">

      总计:<span style="color: red">￥{{orderData.total}}</span>

    </div>

<!-- 地址 -->
    <van-empty v-if=" DetailData.length==0 " description="暂时没有数据"/>
    <div v-if="DetailData.length>0" class="add-div">
          服务地址：{{AddressData.province}}{{AddressData.city}}{{AddressData.area}}{{AddressData.address}}<br>
          联系方式：{{CustomertData.username}}({{CustomertData.telephone}})<br>
          下单时间：{{ orderData.orderTime | dateFormat }}<br>
          服务时间：{{ orderData.serviceTime | dateFormat }}<br>
        <div style="text-align: right">{{orderData.status}}
        </div>


    </div>

    </div>
</template>

<script>
import {findByIdOrder} from "@/api/index.js";
export default {
  data() {
    return {   
    DetailData:[],
    AddressData:[],
    CustomertData:[],
    orderData:[]
          };
  },
  computed: {},
  methods: {
    //获取订单数据
    async loadOrderDetail(){
      let res = await findByIdOrder({id:this.$route.query.id});
      this.DetailData= res.data.data.orderLines;
      this.AddressData = res.data.data.address;
      this.CustomertData = res.data.data.customer;
      this.orderData = res.data.data;

    },
   


  },
  created() {
    this.loadOrderDetail();
  },
  mounted() {}
};
</script>
<style scoped>
.van-card{
  background-color: white;
  box-shadow: 1px 1px 1px 1px rgb(143 66 255 / 40%);
  border-radius: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.total{

  font-size: 12px;
  margin: 12px 0px;
  text-align: right;
}

.add-div {
  color: #999999;
  background-color: rgba(164, 164, 164, 0.104);
  margin: 0px 0px 6px;
  font-size: 12px;
  height: 100px;
  color: #999999;
  display: block;

  
}
</style>
